<template>
  <view :style="[headerBg, headerContainerStyle]" class="swiper-header relative w-full">
    <slot />
    <view class="swiper-container" :style="swiperContainerStyle">
      <swiper circular indicator-dots class="h-full" @change="swiperChange">
        <swiper-item v-for="(item, i) in imageList" :key="i">
          <view :style="swiperImageContainerStyle">
            <image :src="item" :style="imagePositionStyle" />
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script setup lang="ts">
import useStore from '@/store'
import { useState } from '@/hooks/use-state'
interface Isprops {
  images?: string[]
  height?: number
  swiperHeight?: number
  // 添加微调参数，用于不同平台的细微调整
  offsetAdjust?: number
}

const props = withDefaults(defineProps<Isprops>(), {
  images: () => [],
  height: 500,
  swiperHeight: 230,
  offsetAdjust: 1,
})

const imageList = computed(() => props.images)

const { state } = useState({
  currentIndex: 0,
})

const { useSystemStore } = useStore()

const pixelRatio = (useSystemStore.screenWidth || 0) / 750

// 专门用于尺寸计算，向上取整
const rpxToPxSize = (rpx: number) => Math.ceil(rpx * pixelRatio)

// 专门用于位置计算，向下取整
const rpxToPxPosition = (rpx: number) => Math.floor(rpx * pixelRatio)

const headerBg = computed(() => {
  const heightPx = rpxToPxSize(props.height)
  return {
    height: `${heightPx}px`,
    backgroundImage: `url(${imageList.value[state.currentIndex]})`,
  }
})

const headerContainerStyle = computed(() => {
  const screenWidthPx = useSystemStore.screenWidth || 375
  return {
    width: `${screenWidthPx}px`,
    backgroundSize: '100% 100%',
    backgroundRepeat: 'no-repeat',
  }
})

const swiperContainerStyle = computed(() => {
  const bottomPx = rpxToPxPosition(24)
  const leftPx = rpxToPxPosition(24)
  const rightPx = rpxToPxPosition(24)
  const heightPx = rpxToPxSize(props.swiperHeight)

  return {
    position: 'absolute' as const,
    bottom: `${bottomPx}px`,
    left: `${leftPx}px`,
    right: `${rightPx}px`,
    height: `${heightPx}px`,
  }
})

const swiperImageContainerStyle = computed(() => {
  const borderRadiusPx = rpxToPxSize(12)
  return {
    width: '100%',
    height: '100%',
    position: 'relative' as const,
    overflow: 'hidden' as const,
    borderRadius: `${borderRadiusPx}px`,
  }
})

// 精确计算图片位置，使用实际px值确保与背景图对齐
const imagePositionStyle = computed(() => {
  // 将rpx转换为实际px
  const swiperBottomPx = rpxToPxPosition(24) // bottom: 24rpx -> px
  const swiperLeftPx = rpxToPxPosition(24) // left: 24rpx -> px
  const heightPx = rpxToPxSize(props.height)
  const swiperHeightPx = rpxToPxSize(props.swiperHeight)
  const screenWidthPx = useSystemStore.screenWidth || 375 // 默认iPhone宽度

  // 计算swiper容器在整个header中的实际位置
  const swiperTopPx = heightPx - swiperHeightPx - swiperBottomPx + rpxToPxPosition(props.offsetAdjust)

  // 为了消除边缘1px空隙，图片宽度稍微增加，左边偏移稍微减少
  const extraWidth = 2 // 增加2px宽度来消除间隙
  const adjustedLeft = swiperLeftPx - 1 // 左边再偏移1px

  return {
    width: `${screenWidthPx + extraWidth}px`,
    height: `${heightPx}px`,
    position: 'absolute' as const,
    top: `-${swiperTopPx}px`,
    left: `-${adjustedLeft}px`,
  }
})

const swiperChange = (e: { detail: { current: number } }) => {
  state.currentIndex = e.detail.current
}
</script>

<style scoped lang="scss">
.swiper-header {
  transition: background-image 0.4s ease-in-out;
}
</style>
